<template>
  <section class="container-left">
    <div class="title">
      <span>组织队伍</span>
    </div>
    <div class="mt-40px org-team">
      <ul class="flex justify-between">
        <li class="flex flex-col items-center">
          <span>今年应换届</span>
          <img src="@/assets/images/icon_blue bubble.png" alt="" />
          <p>{{ orgTeamData.tjsj1 }}</p>
        </li>
        <li class="flex flex-col items-center">
          <span>逾期未换届</span>
          <img src="@/assets/images/icon_red bubble.png" alt="" />
          <p>{{ orgTeamData.tjsj2 }}</p>
        </li>
        <li class="flex flex-col items-center">
          <span>书记缺配</span>
          <img src="@/assets/images/icon_yellow bubble.png" alt="" />
          <p>{{ orgTeamData.tjsj3 }}</p>
        </li>
      </ul>
    </div>
    <!-- 党群荣誉 -->
    <div class="mt-30px">
      <h2 class="bg-title">
        <span>党群荣誉</span>
      </h2>
      <div class="pie-chart-container flex items-center">
        <div class="pie-chart w-160px h-160px mr-30px">
          <v-chart
            class="chart"
            :option="pieChartOptions"
            autoresize
            @click="onChartHandler"
            ref="refHonorChart"
          />
        </div>
        <ul class="honor-list flex-1">
          <li
            v-for="(item, index) in honorList"
            :key="item.name"
            :class="{ active: item.checked }"
            :style="'--color:' + item.color"
            @click="onSelectHonor(item, index)"
          >
            <span>{{ item.name }}</span
            ><strong>{{ item.value }}</strong>
          </li>
        </ul>
      </div>
    </div>
    <div class="title">
      <span>组织生活</span>
    </div>
    <div class="org-live-container">
      <h2 class="sub-title mt-20px">
        <span>组织生活完成率</span>
      </h2>
      <ul>
        <li class="flex pre-m mt-15px items-center">
          <div class="label cursor-pointer" @click="onOrgLiveOpen(1)">上月</div>
          <div class="line flex-1">
            <v-chart class="chart" :option="lineChartOptions1" autoresize />
          </div>
          <div class="num">{{ Number(orgLiveData.tjsj1).toFixed(2) }}%</div>
        </li>
        <li class="flex cur-m mt-15px items-center">
          <div class="label cursor-pointer" @click="onOrgLiveOpen(2)">本月</div>
          <div class="line flex-1">
            <v-chart class="chart" :option="lineChartOptions2" autoresize />
          </div>
          <div class="num">{{ Number(orgLiveData.tjsj2).toFixed(2) }}%</div>
        </li>
      </ul>
      <h2 class="sub-title mt-20px sub-title-2"><span>未召开组织生活支部</span></h2>
      <div class="mt-20px pb-20px text-size-18px">
        {{ orgLiveData.tjsj3 }}
        <!-- <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>党组织名称</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in orgLiveData.tjsj3.split(',')" :key="index">
              <td>{{ index + 1 }}</td>
              <td colspan="9">{{ item }}</td>
            </tr>
          </tbody>
        </table> -->
      </div>
    </div>
    <!-- 组织生活 -->
    <organizationActivity ref="refOrgLive"></organizationActivity>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, PictorialBarChart } from 'echarts/charts'
import { TooltipComponent, GridComponent } from 'echarts/components'
import organizationActivity from '@/views/home/components/organizationActivity.vue'
import VChart from 'vue-echarts'
import dot1 from '@/assets/images/dot1.png'
import dot2 from '@/assets/images/dot2.png'
use([CanvasRenderer, PieChart, TooltipComponent, BarChart, GridComponent, PictorialBarChart])
import { orgTeam, orgLive } from '@/api'
const honorList = ref<any[]>([
  { name: '国家级党群荣誉', key: 'tjsj4', value: 0, checked: true, color: '#0ee8ea' },
  { name: '省级党群荣誉', key: 'tjsj5', value: 0, checked: false, color: '#19d791' },
  { name: '厅局级党群荣誉', key: 'tjsj6', value: 0, checked: false, color: '#2654de' },
])
const tableData = ref<any[]>([{ name: '' }])
const refHonorChart = ref()
const pieChartOptions = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
      confine: true,
      // formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        name: '党群荣誉',
        type: 'pie',
        radius: ['50%', '75%'],
        center: ['50%', '50%'],
        selectedMode: 'single',
        selectedOffset: 10,
        data: honorList.value.map((v, index) => {
          return {
            selected: index === 0,
            name: v.name,
            value: v.value,
            itemStyle: {
              color: v.color,
            },
          }
        }),
        label: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})
const orgTeamData = reactive({
  tjsj1: 0,
  tjsj2: 0,
  tjsj3: 0,
})
const orgLiveData = reactive({
  tjsj1: 0,
  tjsj2: 0,
  tjsj3: '办公室支部,传防支部,结防支部',
})
const init = () => {
  // 组织队伍
  orgTeam().then((res) => {
    const data = res.data[0]?.statData || {}
    honorList.value.forEach((item) => {
      const k = item.key
      item.value = data[k] || 0
    })
    Object.assign(orgTeamData, data)
  })
  // 组织生活
  orgLive().then((res) => {
    const data = res.data[0]?.statData || {}
    Object.assign(orgLiveData, data)
  })
}
const onChartHandler = (e) => {
  console.log(e.dataIndex)
  honorList.value.forEach((v, i) => {
    v.checked = i === e.dataIndex
  })
}
const onSelectHonor = (item, index: number) => {
  // console.log(index)
  refHonorChart.value?.dispatchAction({
    type: 'select',
    seriesIndex: 0,
    dataIndex: index,
  })
  honorList.value.forEach((v, i) => {
    if (i === index) {
      v.checked = true
    } else {
      v.checked = false
      refHonorChart.value?.dispatchAction({
        type: 'unselect',
        seriesIndex: 0,
        dataIndex: i,
      })
    }
  })
  // console.log(honorList.value)
}
onMounted(() => {
  init()
})

const refPreMonthChart = ref()
const lineChartOptions1 = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
    },
    grid: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 10,
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        z: 1,
        name: '上月',
        type: 'bar',
        data: [100],
        barWidth: 6,
        itemStyle: {
          color: '#1D5657',
          borderRadius: 6,
          opacity: 0.42,
        },
        silent: true,
      },
      {
        z: 2,
        name: '上月',
        type: 'bar',
        data: [{ name: '组织生活完成率', value: Number(orgLiveData.tjsj1).toFixed(2) }],
        barWidth: 6,
        barGap: '-100%',
        itemStyle: {
          color: {
            type: 'line',
            colorStops: [
              {
                offset: 0,
                color: '#143438', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#4DEEED', // 100% 处的颜色
              },
            ],
          },
          borderRadius: 6,
        },
      },
      {
        z: 3,
        type: 'pictorialBar',
        data: [Number(orgLiveData.tjsj1).toFixed(2)],
        symbol: 'image://' + dot1, // 'circle',
        symbolSize: [20, 20],
        symbolPosition: 'end',
        symbolOffset: [0, 0],
        itemStyle: {
          color: '#4DEFED',
        },
        silent: true,
      },
    ],
  }
})
const lineChartOptions2 = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
    },
    grid: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 10,
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        z: 1,
        name: '背景',
        type: 'bar',
        data: [100],
        barWidth: 6,
        itemStyle: {
          color: '#1D5657',
          borderRadius: 6,
          opacity: 0.42,
        },
        silent: true,
      },
      {
        z: 1,
        name: '本月',
        type: 'bar',
        data: [{ name: '组织生活完成率', value: Number(orgLiveData.tjsj2).toFixed(2) }],
        barWidth: 6,
        barGap: '-100%',
        itemStyle: {
          color: {
            type: 'line',
            colorStops: [
              {
                offset: 0,
                color: '#0F3538', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#19D791', // 100% 处的颜色
              },
            ],
          },
          borderRadius: 6,
        },
      },
      {
        z: 3,
        type: 'pictorialBar',
        data: [Number(orgLiveData.tjsj2).toFixed(2)],
        symbol: 'image://' + dot2, // 'circle',
        symbolSize: [20, 20],
        symbolPosition: 'end',
        symbolOffset: [0, 0],
        itemStyle: {
          color: '#19D791',
        },
        silent: true,
      },
    ],
  }
})
const refOrgLive = ref<InstanceType<typeof organizationActivity>>()
const onOrgLiveOpen = (num: number) => {
  if (num === 1) {
    // 组织生活
    refOrgLive.value?.open(num)
  } else {
    refOrgLive.value?.open(num)
  }
}
</script>

<style lang="less">
.container-left {
  height: 100%;
  padding-left: 36px;
  .title {
    padding-top: 16px;
    background: url('@/assets/images/image_background.png') no-repeat;
    span {
      font-family: HYk2gj;
      font-style: italic;
      font-size: 24px;
      color: #fdfdfb;
      line-height: 24px;
      letter-spacing: 10px;
    }
  }
  .org-team {
    li {
      img {
        width: 100%;
        margin-top: 10px;
      }
      p {
        font-family: HYk2gj;
        font-size: 22px;
        color: #fff;
      }
    }
    li:nth-child(1) span {
      color: #b1cbe6;
    }
    li:nth-child(2) span {
      color: #cf889d;
    }
    li:nth-child(3) span {
      color: #f0d3b1;
    }
  }
  .bg-title {
    height: 60px;
    line-height: 42px;
    font-size: 20px;
    padding-left: 64px;
    color: #fdfdfb;
    font-family: HYk2gj;
    background: url('@/assets/images/image_line.png') no-repeat;
    span {
      color: transparent;
      background: linear-gradient(to bottom, #fafafc 0%, #bdf3f5 100%);
      -webkit-background-clip: text;
    }
  }
  .honor-list {
    li {
      margin-bottom: 5px;
      color: #8b8f8f;
      cursor: pointer;
      span {
        margin-right: 10px;
        font-size: 16px;
      }
      strong {
        font-size: 20px;
      }
      &.active {
        &::before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin-right: 6px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: var(--color);
        }
        color: #fdfdfb;
        span {
          font-size: 20px;
        }
        strong {
          font-size: 30px;
        }
      }
    }
  }
  .org-live-container {
    .sub-title {
      line-height: 32px;
      padding-left: 30px;
      background: url('@/assets/images/ling-xing2.png') no-repeat -8px center;
      &.sub-title-2 {
        // padding-left: 26px;
        background: url('@/assets/images/ling-xing.png') no-repeat left center;
      }
      span {
        font-size: 20px;
        font-family: HYk2gj;
        color: transparent;
        background: linear-gradient(to bottom, #fafafc 0%, #bdf3f5 100%);
        -webkit-background-clip: text;
      }
    }
    ul {
      .label {
        font-size: 16px;
        height: 32px;
        padding-left: 12px;
        line-height: 32px;
        width: 96px;
        color: #2acfff;
      }
      .line {
        margin-left: 14px;
        margin-right: 14px;
        height: 32px;
        // height: 4px;
        // background: #1d5657;
        // opacity: 0.42;
      }
      .num {
        font-weight: bold;
        font-size: 20px;
      }
      .pre-m {
        .label {
          color: #2acfff;
          background:
            url('@/assets/images/icon_shangxue.png') no-repeat left center,
            url('@/assets/images/icon_zhankai.png') no-repeat right 15px center;
        }
        .num {
          color: #4defed;
        }
      }
      .cur-m {
        .label {
          color: #19d791;
          background:
            url('@/assets/images/text-bg.png') no-repeat left center,
            url('@/assets/images/icon-arrow-right2.png') no-repeat right 15px center;
        }
        .num {
          color: #19d791;
        }
      }
    }
    table {
      width: 100%;
      font-size: 18px;
      background-color: #0c1b23;
      thead {
        color: #fefefe;
      }
      tr {
        line-height: 34px;
      }
      th,
      td {
        text-align: center;
      }
      tbody {
        color: #fefefe;
        tr:nth-child(odd) {
          background: #253542;
          opacity: 0.6;
        }
        tr:nth-child(even) {
          opacity: 0.6;
        }
      }
    }
  }
}
</style>
